<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="response bg-white flex flex-direction" style="height: 600upx;">
				<view class="flex justify-between">
					<view class="text-lg text-black padding" @click="close">取消</view>
					<view class="text-lg text-gray padding">请选择</view>
					<view class="text-lg text-black padding" @click="onSure">确定</view>
				</view>
				<view class="flex response" style="background-color: #f5f5f5; height: 120upx;">
					<view style="width: 48%; margin: 8upx" class="flex flex-direction align-center justify-center" :class="tabCur == 0? 'bg-white text-blue': ''" @click="onClickTab(0)">
						<view class="text-lg">
							开始时间
						</view>
						<view  class="text-df">
							{{startTime}}
						</view>
					</view>
					<view style="width: 48%; margin: 8upx" class="flex flex-direction align-center justify-center" :class="tabCur == 1? 'bg-white text-blue': ''" @click="onClickTab(1)">
						<view class="text-lg">
							结束时间
						</view>
						<view  class="text-df">
							{{endTime}}
						</view>
					</view>
				</view>
				<picker-view class="response" style="height: 400upx;" :value="dateValue" @change="bindMutibleDateChange">
					<picker-view-column>
						<view v-for="(item,index) in hours" :key="index">
							<view class="text-center padding-sm">
								{{item}}点
							</view>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in times" :key="index">
							<view class="text-center padding-sm">
								{{item}}分
							</view>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

export default {
	name: 'z-date-picker-range',
	props: {
		// startDate: {
		// 	type: Array,
		// 	default: null,
		// },
	},
	data() {
		
		return {
			nowDate: ["00:00","00:00"],
			hours:[],
			dateValue: [0,0],
			startTime: "",
			endTime: "",
			times: [],
			tabCur: 0,
			startDate: null,
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
			// dateValue: ["",""]
		};
	},
	mounted() {
		this.initTimeArr();
	},
	watch: {
		// month() {
		// 	this.initDays();
		// }
	},
	computed:{
	},
	methods: {
		setDateValue: function(){
			let dateArr = this.nowDate[this.tabCur].split(":");
			this.dateValue = [parseInt(dateArr[0]), parseInt(dateArr[1])];
		},
		initTimeArr: function(){
			const hours = [];
			const times = [];
			for (let i = 0; i < 24; i++) {
				let vl = i < 10 ? ('0' + i) : i
				hours.push(vl);
			}
			for (let i = 0; i < 60; i++) {
				let vl = i < 10 ? ('0' + i) : i
				times.push(vl);
			}
			this.hours = hours;
			this.times = times;
		},
		changeTime: function(){
			this.startTime = this.nowDate[0];
			this.endTime = this.nowDate[1];
		},
		open:function(e){
			this.tabCur = 0;
			this.startDate = e;
			if(e == null){
				this.nowDate = ["00:00","00:00"];
			}else{
				this.nowDate = e.concat([]);
			}
			this.setDateValue();
			this.changeTime();
			this.$refs.popup.open();
		},
		close:function(e){
			this.$emit("closePicker",this.startDate);
			this.$refs.popup.close();
		},
		onSure: function(){
			let dateArr0 = this.nowDate[0].split(":");
			let dateArr1 = this.nowDate[1].split(":");
			let dateValue0 = [parseInt(dateArr0[0]), parseInt(dateArr0[1])];
			let dateValue1 = [parseInt(dateArr1[0]), parseInt(dateArr1[1])];
			if(dateValue0[0] > dateValue1[0] || (dateValue0[0] == dateValue1[0] && dateValue0[1] >= dateValue1[1])){
				uni.showToast({
					title: "开始时间不能小于结束时间",
					duration: 2000,
					icon: 'none',
					mask: true
				})
				return;
			}
			this.$emit("changeDate",this.nowDate);
			this.$refs.popup.close();
		},
		onClickTab: function(e){
			if(this.tabCur == e){
				return;
			}
			this.tabCur = e;
		},
		bindMutibleDateChange: function(e){
			const val = e.detail.value
			let str = "";
			for(let i = 0; i < val.length; i++){
				str = str + (val[i] < 10 ? ('0' + val[i]) : val[i]);
				if(i == 0){
					str = str + ':'
				}
			}
			this.nowDate[this.tabCur] = str;
			this.nowDate = this.nowDate.concat([]);
			this.changeTime();
		},
	}
};
</script>

<style lang="scss">

</style>
